<%--
  Created by IntelliJ IDEA.
  User: lub_lenovo
  Date: 2017/8/6
  Time: 17:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <!-- 导入css -->
    <link rel="stylesheet" href="/kindeditor/themes/default/default.css" />
    <!-- 导入核心js -->
    <script src="/kindeditor/kindeditor-all.js"></script>
    <!-- 导入語言包 -->
    <script src="/kindeditor/lang/zh_CN.js"></script>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <title>KE</title>
    <script type="text/javascript">
        var options = {
            allowFileManager : true,
            uploadJson : '/article/upload.do',//后台文件上传处理的路径
            filePostName : 'file',//文件的字段名，一会看到后台代码时会解释怎么使用
            dir:'image'
        };
        //初始化kindeditor组件
        KindEditor.ready(function(K) {


//            K('#btn').click(function() {
//                //打开图片上传窗口
//                KindEditor.editor(options).loadPlugin('multiimage',function(){
//                    var editor = this;
//                    editor.plugin.multiImageDialog({
//                        clickFn : function(urlList) {
//                            var imgArray = [];
//                            KindEditor.each(urlList, function(i, data) {
//                                imgArray.push(data.url);
////                                form.find(".pics ul").append("<li><a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='80' height='50' /></a></li>");
//                            });
////                            form.find("[name=image]").val(imgArray.join(","));
//                            console.log(imgArray);
//                            editor.hideDialog();
//                        }
//                    });
//                });
//            });
        });

        $(function(){
            initPicUpload({});

        })

        // 初始化图片上传组件
         function initPicUpload(data){
            $(".picFileUpload").each(function(i,e){
                var _ele = $(e);
                _ele.siblings("div.pics").remove();
                _ele.after('\
    			<div class="pics">\
        			<ul></ul>\
        		</div>');
                // 回显图片
                if(data && data.pics){
                    var imgs = data.pics.split(",");
                    for(var i in imgs){
                        if($.trim(imgs[i]).length > 0){
                            _ele.siblings(".pics").find("ul").append("<li><a href='"+imgs[i]+"' target='_blank'><img src='"+imgs[i]+"' width='80' height='50' /></a></li>");
                        }
                    }
                }
                //给“上传图片按钮”绑定click事件
                $(e).click(function(){
                    var form = $(this).parent("form");
                    console.log(form);
                    //打开图片上传窗口
                    KindEditor.editor(options).loadPlugin('multiimage',function(){
                        var editor = this;
                        editor.plugin.multiImageDialog({
                            clickFn : function(urlList) {
                                var imgArray = [];
                                KindEditor.each(urlList, function(i, data) {
                                    imgArray.push(data.url);
                                    form.find(".pics ul").append("<li><a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='80' height='50' /></a></li>");
                                });
                                form.find("[name=image]").val(imgArray.join(","));
                                editor.hideDialog();
                            }
                        });
                    });
                });
            });
        }
    </script>
</head>

<body>
kindeditor测试页面 <br>
<form id="example">
    <textarea id="content" name="content" style="width:700px;height:300px;visibility:hidden;"></textarea><br />
    <a id="btn" class="picFileUpload">提交内容</a> (提交快捷键: Ctrl + Enter)
</form>
</body>
